<template>
  <div>

    <!--搜索框部分-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="文件路径">
          <el-input placeholder="请输入服务器要读取的文件路径" v-model.trim="musicParam.path" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="warning" size="mini" @click="analysis">解析</el-button>
          <el-button type="primary" size="mini" @click="operationManualMusic">操作说明</el-button>
        </el-form-item>

      </el-form>

    </el-card>



    <el-card style="margin-top: 10px">

      <el-table
        :data="musicAnalysisTable.musicData"
        max-height="600px"
        height="600px"
        style="width: 100%">

        <el-table-column
          prop="name"
          label="歌曲名称"
        >
        </el-table-column>

        <el-table-column
          prop="musicTypeName"
          label="音乐类型"
        >
        </el-table-column>

        <el-table-column
          prop="singer"
          label="歌手"
        >
        </el-table-column>

        <el-table-column
          prop="lyrics"
          label="作词"
        >
        </el-table-column>

        <el-table-column
          prop="album"
          label="专辑"
        >
        </el-table-column>

      </el-table>

    </el-card>


  </div>
</template>

<script>
  import http from '@/utils/http'

  export default {
    // 音乐快捷导入
    name: "QuickImportOfMusic",
    data(){
      return {
        // 提交的参数
        musicParam: {
          // 要读取的路径
          path: null,
        },
        // 解析出来的音乐信息
        musicAnalysisTable: {
          // 读取到的数据
          musicData: null,
        },
      }
    },
    methods: {
      /**
       * 操作手册
       */
      operationManualMusic(){
        window.open("https://gitee.com/sprouting/personal-system-web/blob/master/%E7%BD%91%E6%98%93%E4%BA%91%E9%9F%B3%E4%B9%90%E6%AD%8C%E6%9B%B2%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8C.md")
      },
      /**
       * 解析导入
       */
      analysis(){
        http.post("/music/importNeteaseMusic", {
          filePath: this.musicParam.path,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.musicAnalysisTable.musicData = res.data
          this.$message.success("解析完成");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    }
  }
</script>

<style scoped>

</style>
